<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Bonus Market</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../resources/css/mui.css">
	<link rel="stylesheet" href="../../resources/css/style.css">
	<link rel="stylesheet" href="../../resources/css/user/register.css">
	<script src="../../resources/assets/mui.js"></script>
	<script src="../../resources/assets/avalon.js"></script>
	<script src="../../resources/assets/jquery-2.0.3.min.js"></script>
	<script src="../../resources/assets/jquery.cxselect.min.js"></script>
	<script src="../../resources/js/common.js"></script>
	<script src="../../resources/js/dahua.config.js"></script>
	<script src="../../resources/js/lang/en.js"></script>
	<!-- <script src="../../resources/js/user/register.js"></script> -->
	<script src="../../resources/js/market/index.js"></script>
	<style type="text/css">
		.mui-content>.mui-table-view:first-child{
			margin-top:-1px;
		}
		.mui-grid-view a{
			display: block !important;
			box-shadow: 0 4px 8px 0 rgba(37,36,42,0.16);
			margin: 0 !important;
			padding: 0 !important;
		}
		.mui-grid-view .my-black a:before{
			    content: " ";
				background: url(../../resources/images/quan_img_1@2x.png) repeat center center;
				display: block;
				height: 5px;
				background-size: contain;
		}
		.mui-grid-view .my-yellow a:before{
			    content: " ";
				background: url(../../resources/images/quan_img_3@2x.png) repeat center center;
				display: block;
				height: 5px;
				background-size: contain;
		}
		.mui-grid-view a:after{
			    content: " ";
				background: url(../../resources/images/quan_img_2@2x.png) repeat center center;
				display: block;
				height: 5px;
				background-size: contain;
		}
		.mui-grid-view .my-black .mui-media-object{
			background-color: black;
		}
		.mui-grid-view .my-yellow .mui-media-object{
			background-color: #c4b488;
		}
		.mui-grid-view .mui-media-object{
			display: flex;
			flex-direction: column;
		}
		.mui-grid-view .mui-media-object p{
			color: white;
		}
		.mui-grid-view .mui-media-object .my-price{
			flex: 1;
			font-size: 28px;
			line-height: 80px;
		}
		.mui-grid-view .mui-media-object .my-time{
			text-align: right;
			line-height: 14px;
			padding-right: 10px;
			padding-bottom: 10px;
		}
		.mui-grid-view .mui-media-body{
			display: flex !important;
			flex-direction: column;
			height: auto !important;
			background-color: #fafafa;
		}
		.mui-grid-view .mui-media-body .my-title{
			color: #25242A;
			line-height: 25px;
			font-size: 15px;
		}
		.mui-grid-view .mui-media-body .my-subTitle{
			color: #25242A;
			line-height: 25px;
		}
	</style>
</head>

<body ms-controller="listPage" >
	<div id="regPage">
		<!--头部-->
		<header class="mui-bar mui-bar-nav header">
			<h1 id="title" class="mui-title">Bonus Market</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white login"></a>
			<a class="mui-icon mui-pull-right mui-icon-white home" href="../product/category.html">
				<i class="icon icon_home"></i>
			</a>
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class='noData' ms-html="@noReceiptedData"></div>
				<!-- <div class="mui-content-padded"> -->
					<form :validate="@validate" id="form" method="post">
						<input type="hidden" value="" id="uid" name="uid" />
						<ul class="mui-table-view mui-grid-view">
							<li class="mui-table-view-cell mui-media mui-col-xs-6" ms-for='(i,item) in @receipted' ms-class="itemColor()">
								<a href="#">
									<div class="mui-media-object">
										<p class="my-price">¥{item.value}</p>
										<p class="my-time">有效期：{item.validityDay}天</p>
									</div>
									<div class="mui-media-body">
										<p class="my-title">积分兑换现金券</p>
										<p class="my-subTitle">{item.score}积分=¥{item.value}</p>
									</div>
								</a>
							</li>
							<!-- <li class="mui-table-view-cell mui-media mui-col-xs-6 my-yellow">
								<a href="#">
									<div class="mui-media-object">
										<p class="my-price">¥1500</p>
										<p class="my-time">有效期：90天</p>
									</div>
									<div class="mui-media-body">
										<p class="my-title">积分兑换现金券</p>
										<p class="my-subTitle">4500积分=¥1500</p>
									</div>
								</a>
							</li> -->
						</ul>
					</form>
				<!-- </div> -->
			</div>
		</div>
	</div>

	<!--底部导航
		<footer class="mui-bar mui-bar-tab footer">
			<a id="defaultTab" data-id="1" class="mui-tab-item" href="../product/category.html">
				<span class="mui-icon icon icon_product"></span>
				<span class="mui-tab-label">Product</span>
			</a>
			<a class="mui-tab-item" href="../solution/category.html">
				<span class="mui-icon icon icon_solution"></span>
				<span class="mui-tab-label">Solution</span>
			</a>
			<a id="partner" class="mui-tab-item mui-hidden" href="../partner/index.html">
				<span class="mui-icon icon icon_partner"></span>
				<span class="mui-tab-label">Partner</span>
			</a>
			<a class="mui-tab-item mui-active" href="user.html">
				<span class="mui-icon icon icon_usercenter active"></span>
				<span class="mui-tab-label">User Center</span>
			</a>
		</footer>
-->
</body>

</html>
